<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加语句</title>
    <link rel="stylesheet" href="css/reset.css">
    <!-- <link href="http://at.alicdn.com/t/font_1435514_lxxm9rqror.css" rel="stylesheet"> -->
    <style>
        body {
            color: #606266;
            width: 100%;
        }

        header {
            margin-top: 2px;
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: white;
            overflow: hidden;
        }

        header span,
        header p {
            display: inline-block;
            padding: 0 10px;
        }

        header p {
            float: right;
            color: red;
            margin-right: 4%;
            cursor: pointer;
        }

        main {
            width: 94.5%;
            padding: 2%;
            margin: 10px;
            font-size: 14px;
            background-color: white;
        }

        aside {
            overflow: hidden;
        }

        main p {
            width: 98%;
            margin: 10px 0;
            color: #999;
            padding: 0px 0 10px 20px;
            border-bottom: 1px solid #dcdfe6;
        }

        main input,
        main select {
            height: 35px;
            border: 1px solid #dcdfe6;
        }

        main ul {
            width: 100%;
        }

        main li {
            height: 36px;
            padding: 10px 0;
            overflow: hidden;
        }

        main li>div {
            float: left;
        }

        main li span {
            float: left;
        }

        main li div div {
            float: left;
        }

        main li>div span {
            display: inline-block;
            height: 36px;
            line-height: 36px;
            width: 25%;
            text-align: right;
            padding-right: 5%;
        }

        main li>div div {
            width: 68%;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
        }

        main input,
        main select {
            width: 95%;
            border: none;
            padding-left: 5%;
            outline: none;
            border-radius: 5px;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #abacb1;
        }

        main select {
            width: 100%;
        }

        .three>div {
            width: 32.5%;
        }

        main li>div {
            width: 49%;
        }

        .left ul:last-of-type li>div {
            width: 110%;
        }

        .left ul:last-of-type li span {
            width: 15%;
        }

        .left {
            float: left;
            width: 48%;
        }

        .right {
            float: right;
            width: 48%;
        }

        .bottom {
            width: 100%;
            background-color: white;
        }

        .bottom ul {
            display: none;
        }

        .bottom li:last-of-type {
            height: 100px;
        }

        .bottom span {
            width: 6%;
        }

        .bottom li>div {
            width: 100%;
        }

        .bottom li:first-of-type>div div {
            width: 20%;
        }

        .bottom li:last-of-type>div div {
            width: 88%;
            height: 100px;
        }

        .bottom textarea {
            width: 100%;
            height: 90px;
            border: none;
            font-size: 14px;
            padding: 10px 0px 0px 0px;
            margin: 0;
            text-indent: 1.5em;
            border-radius: 5px;
        }

        footer p,
        footer a {
            width: 97%;
            border: 1px dashed #dcdfe6;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
        }

        footer p:hover {
            background-color: #d3d3d3;
            color: #4eaf9d;
            border-color: #4eaf9d;
        }

        footer a {
            border: none;
            background-color: #429788;
            width: 250px;
            height: 36px;
            line-height: 36px;
            display: block;
            color: white;
            margin: auto;
        }

        footer a:hover {
            background-color: #3dbea7;
        }

        footer span {
            margin-right: 10px;
            font-weight: 700;
        }

        .radio input {
            width: 14px;
            height: 14px;
            margin-top: 2px;
            vertical-align: top;
        }

        .radio i {
            margin-top: 1px;
            display: block;
            font-size: 12px;
            height: 18px;
            line-height: 18px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <header>
        <span>学生管理</span>/
        <span>学生列表</span>
    </header>
    <main>
        <aside>
            <div class="left public">
                <p>基本信息</p>
                <ul>
                    <li class="three">
                        <div>
                            <span>姓名</span>
                            <div><input type="text" placeholder="请输入姓名" id="studentName"></div>
                        </div>
                        <div>
                            <span>性别</span>
                            <div>
                                <select name="性别" id="studentSex">
                                    <option disabled selected hidden>性别</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>年龄</span>
                            <div><input type="number" placeholder="年龄" min="0" max="100" id="studentAge"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>电话</span>
                            <div><input type="text" placeholder="请输入电话" id="studentPhone"></div>
                        </div>
                        <div>
                            <span>微信号</span>
                            <div><input type="text" placeholder="请输入微信号" id="studentWX"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>QQ</span>
                            <div><input type="text" placeholder="请输入QQ" id="studentQQ"></div>
                        </div>
                        <div>
                            <span>意向学科</span>
                            <div>
                                <select name="请选择学科" id="subject">
                                    <option disabled selected hidden>请选择学科</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="width: 110%;">
                            <span style="width: 15%;">身份证号</span>
                            <div><input type="text" placeholder="请输入身份证号" id="studentSFZ"></div>
                        </div>
                    </li>
                </ul>
                <p>紧急联系人信息</p>
                <ul>
                    <li>
                        <div>
                            <span>紧急联系人姓名</span>
                            <div><input type="text" placeholder="紧急联系人姓名" id="emergencyName"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>紧急联系人电话</span>
                            <div><input type="text" placeholder="紧急联系人电话" id="emergencyTelephone"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>与本人关系</span>
                            <div>
                                <select name="与本人关系" id="relationship">
                                    <option disabled selected hidden>与本人关系</option>
                                    <option>父子</option>
                                    <option>母子</option>
                                    <option>夫妻</option>
                                    <option>朋友</option>
                                </select>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="right public">
                <p>学校信息</p>
                <ul>
                    <li>
                        <div>
                            <span>学校名称</span>
                            <div>
                                <select name="学校名称" id="schoolName">
                                    <option disabled selected hidden>请输入学校名称</option>
                                    <option value="2748">黄河科技学院</option>
                                    <option value="2749">加里敦大学</option>
                                    <option value="2750">爱丽斯顿大学</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>学制</span>
                            <div><input type="text" placeholder="请输入学制" id="educationSystme"></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>专业</span>
                            <div><input type="text" placeholder="请输入专业" id="major"></div>
                        </div>
                        <div>
                            <span>年级</span>
                            <div><input type="text" placeholder="请输入年级" id="studentGarde"></div>
                        </div>
                    </li>
                </ul>
                <p>学生记录</p>
                <ul>
                    <li>
                        <div>
                            <span>学生来源</span>
                            <div>
                                <select name="学生来源" id="studentss">
                                    <option disabled selected hidden>学生来源</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>缴费方式</span>
                            <div>
                                <select name="缴费方式" id="payment">
                                    <option value="" disabled selected hidden>缴费方式</option>
                                    <option value="">支付宝</option>
                                    <option value="">微信</option>
                                    <option value="">现金</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>学费金额</span>
                            <div><input type="text" placeholder="21800" disabled></div>
                        </div>
                        <div>
                            <span>意向类型</span>
                            <div>
                                <select name="请输入意向类型">
                                    <option value="" disabled selected hidden>请输入意向类型</option>
                                    <option value="">A类</option>
                                    <option value="">B类</option>
                                    <option value="">C类</option>
                                </select>
                            </div>
                        </div>
                    </li>
                </ul>
                <p>口碑联系人信息</p>
                <ul>
                    <li>
                        <div>
                            <span>校区</span>
                            <div>
                                <select name="校区" id="schools">
                                    <option></option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span id="Radio" class="radio">
                                <i><input type="radio" id="dept" name="go" class="dept">员工</i>
                                <i><input type="radio" id="class" name="go" class="dept">班级</i>
                            </span>
                            <div>
                                <select name="员工/班级" id="classs">
                                    <option></option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>姓名</span>
                            <div>
                                <select name="姓名" id="names">
                                    <option></option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>联系电话</span>
                            <div>
                                <select name="联系电话" id="tel">
                                    <option></option>
                                </select>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </aside>
        <div class="bottom">
            <p>记录信息</p>
            <ul>
                <li>
                    <div>
                        <span>记录类型</span>
                        <div>
                            <select id="jilu">
                                <option value="" disabled selected hidden>记录类型</option>
                                <option value="">A类</option>
                                <option value="">B类</option>
                                <option value="">C类</option>
                                <option value="">D类</option>
                                <option value="">直接就业</option>
                                <option value="">专升本</option>
                                <option value="">考公务员</option>
                                <option value="">考研</option>
                                <option value="">考博</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>记录内容</span>
                        <div><textarea placeholder="请录入记录详情" id="flowDesc"></textarea></div>
                    </div>
                </li>
            </ul>
        </div>
        <footer>
            <p><span class="icon iconfont icon-tianjia"></span>添加记录</p>
            <a><span class="icon iconfont icon-tijiao1"></span>提交</a>
        </footer>
    </main>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
    var search = window.location.search.match(/\d+/g);
    // 检索localStorage
    //查看
    if (localStorage.getItem("ONOFF") === 'true') {
        $('input,textarea').prop('readonly', 'true');
        $('select').prop('disabled', 'disabled');
        $("footer").css('display', 'none');
        //修改信息
        $('input,textarea').removeAttr('readonly');
        $('select').removeAttr('disabled', 'disabled');
        $("footer").css('display', 'block');
    }
    //跳转添加
    if (localStorage.getItem("ONOFF1") === 'true') {
        $('header p').css('display', 'none');
    }
    //编辑
    if (localStorage.getItem("ONOFF0") === 'true') {
        $('input,textarea').removeAttr('readonly', 'true');
        $("footer").css('display', 'block');
    }
    //添加
    $('footer p:eq(0)').on('click', function () {
        $('.bottom ul').css('display', 'block');
    })

    //添加提交
    var studentURL = 'http://192.168.3.27:9999/'
    $('footer a:eq(0)').on('click', function () {
        if($('#dept').prop("checked")){
             var check = 1;
         }else{
             var check = 0;
         }
        $.ajax({
            url: studentURL + "/oaSystem/addStu",
            dataType: "json",
            type: "post",
            data: {
                number:check,
                dNameId:$("#names").find("option:selected").val(),
                studentName: $('#studentName').val(),
                studentSex: $('#studentSex').val(),
                age: $('#studentAge').val(),
                telephone: $('#studentPhone').val(),
                weixin: $('#studentWX').val(),
                qq: $('#studentQQ').val(),
                idCard: $('#studentSFZ').val(),
                emergencyName: $('#emergencyName').val(),
                emergencyContact: $('#emergencyTelephone').val(),
                relationship: $('#relationship').val(),
                schoolId: $('#schoolName').val(),
                educationSystme: $('#educationSystme').val(),
                major: $('#major').val(),
                studentGarde: $('#studentGarde').val(),
                sourceld: $('#studentss').val(),
                payment: $('#payment').val(),
                inputId: $('#studentPhone').val(),
                centreid: $('#schools').val(),
                subjectId: $('#subject').val(),
                flowDesc: $('#flowDesc').val(),
                womTel: $('#tel').val(),
                method: 'addStu'
            },
            success: function (data) {
                console.log(data);
            }
        })
    })
    // 意向学科
    $(function () {
        $.ajax({
            type: "post",
            dataType: "json",
            url: studentURL + "oaSystem/student",
            data: {
                method: "subject",
                jobId: "5"
            },
            success: function (data) {
                $("#subject").off("click")
                console.log(data);
                if (data.code == 200) {
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        $("<option value=''>" + list[i].subjectName + "</option>").appendTo($("#subject"));
                    }
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo);
            }
        })
    });
    // 学生来源
    $(function () {
        $.ajax({
            type: "post",
            dataType: "json",
            url: studentURL + "oaSystem/student",
            data: {
                method: "source"
            },
            success: function (data) {
                $("#studentss").off("click")
                if (data.code == 200) {
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        $("<option value=''>" + list[i].sourceName + "</option>").appendTo($("#studentss"));
                    }
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo);
            }
        })
    });
    // 校区
    $(function () {
        $.ajax({
            type: "post",
            dataType: "json",
            url: studentURL + "oaSystem/student",
            data: {
                method: "center"
            },
            success: function (data) {
                if (data.code == 200) {
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        $("<option value=" + list[i].centreid + ">" + list[i].centreName + "</option>").appendTo($("#schools"));
                    }
                    $("#schools").change(function () {
                        $.ajax({
                            type: "post",
                            dataType: "json",
                            url: studentURL + "oaSystem/student",
                            data: {
                                method: 'deptment',
                                centerId: $("#schools").val()
                            },
                            success: function (data) {
                                $("#classs").html('')
                                if (data.code == 200) {
                                    var list = data.result;
                                    for (var i = 0; i < list.length; i++) {
                                        $("<option value=" + list[i].deptId + ">" + list[i].deptName + "</option>").appendTo($("#classs"));
                                    }
                                    $("#classs").change(function () {
                                        var Na = $("#classs").find('option:selected').val();
                                        $.ajax({
                                            type: "post",
                                            dataType: "json",
                                            url: studentURL + "oaSystem/student",
                                            data: {
                                                'method': 'claInfo',
                                                'classId': Na
                                            },
                                            success: function (data) {
                                                $("#names").html('')
                                                if (data.code == 200) {
                                                    var list = data.result;
                                                    for (var i = 0; i < list.length; i++) {
                                                        $("<option value=''>" + list[i].studentName + "</option>").appendTo($("#names"));
                                                        $("<option value=''>" + list[i].telphone + "</option>").appendTo($("#tel"));
                                                    }
                                                }
                                            },
                                            error: function (xhr, errorInfo) {
                                                console.log(errorInfo);
                                            }
                                        })
                                    })
                                }
                            },
                            error: function (xhr, errorInfo) {
                                console.log(errorInfo);
                            }
                        })
                    })
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo);
            }
        })
    });
    // 员工
    $("#dept").on("click", function () {
        var te = $('#schools').find("option:selected").val();
        $.ajax({
            type: "post",
            dataType: "json",
            url: studentURL + "oaSystem/student",
            data: {
                method: 'deptment',
                centerId: te
            },
            success: function (data) {
                $("#classs").off("click")
                if (data.code == 200) {
                    $("#classs").html('')
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        $("<option value=" + list[i].deptId + ">" + list[i].deptName + "</option>").appendTo($("#classs"));
                    }
                    $("#classs").change(function () {
                        alert('1')
                        var Na = $("#classs").find('option:selected').val();
                        $.ajax({
                            type: "post",
                            dataType: "json",
                            url: studentURL + "oaSystem/student",
                            data: {
                                method: 'claInfo',
                                classId: Na
                            },
                            success: function (data) {
                                $("#names").html('')
                                console.log(data);
                                if (data.code == 200) {
                                    var list = data.result;
                                    for (var i = 0; i < list.length; i++) {
                                        $("<option value=''>" + list[i].studentName + "</option>").appendTo($("#names"));
                                        $("<option value=''>" + list[i].telphone + "</option>").appendTo($("#tel"));
                                    }
                                }
                            },
                            error: function (xhr, errorInfo) {
                                console.log(errorInfo);
                            }
                        })
                    })
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo);
            }
        })
    });
    // 班级
    $("#class").on("click", function () {
        var te = $('#schools').find("option:selected").val();
        $.ajax({
            type: "post",
            dataType: "json",
            url: studentURL + "oaSystem/student",
            data: {
                method: 'clas',
                centerId: te
            },
            success: function (data) {
                $("#classs").off("click")
                if (data.code == 200) {
                    $("#classs").html('')
                    var list = data.result;
                    for (var i = 0; i < list.length; i++) {
                        $("<option value=" + list[i].classId + ">" + list[i].className + "</option>").appendTo($("#classs"));
                    }
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo);
            }
        })
    });
</script>

</html>